---
layout: default
---

<section class="subtitle">
  <h2>A <strong>lightweight</strong> semantic <strong>grid</strong> framework for <strong>Sass</strong> and <strong>Bourbon</strong>.</h2>
</section>


<section class="code">
{% highlight html %}
<!-- HTML markup for the section right below this code block -->
<section>
  <aside>What is it about?</aside>
  <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>
{% endhighlight %}
<br>
{% highlight scss %}
// Enter Neat
section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}
// And the result is...

{% endhighlight %}
</section>

<section class="instructions">
  <section id="what">
    <aside>
      <h3>What is it about?</h3>
    </aside>

    <article>
    {% include what.html %}
    </article>
  </section>

  <section id="why">
    <aside>
      <h3>Why another grid framework?</h3>
    </aside>

    <article>
    {% include why.html %}
    </article>
  </section>

  <section id="responsive">
    <aside>
      <h3>Is it responsive?</h3>
    </aside>

    <article>
    {% include responsive.html %}
    </article>
  </section>

  <section id="getting-started">
    <aside>
    <h3>Alright. How do I get started?</h3>
    </aside>

    <article>
      {% include getting-started.html %}
    </article>
  </section>

  <section id="support">
    <aside>
    <h3>Feedback?</h3>
    </aside>

    <article>
      {% include support.html %}
    </article>
  </section>

</section>

<footer>© 2012 – {{ site.time | date: '%Y' }} thoughtbot, inc.</footer>
